﻿<template>
  <XenPageLayout title="访客事由" title-align="left">
    <div class="appointment">
      <div class="main-content">
        <div class="section-title">请选择访问事由</div>

        <div class="reason-list">
          <div
            class="reason-item"
            v-for="(item, index) in reasonList"
            :key="index"
            @click="selectReason(item, index)"
            :class="{ selected: selectedIndex === index }"
          >
            <div class="reason-text">{{ item.ReasonName }}</div>
          </div>
        </div>

        <div class="next-button" :class="{ active: true }" @click="handleNext">
          下一步
        </div>
      </div>
    </div>
  </XenPageLayout>
</template>

<script lang="ts" setup>
import XenPageLayout from "@/layouts/XenPageLayout.vue";
import { ref, onMounted } from "vue";
import SysVisitorReasonApi from "./api";
import type { ISearchRequest } from "./api/interface";

// 响应式数据
const reasonList = ref<ISearchRequest[]>([]);
const loading = ref(false);
// 使用索引跟踪选中项，初始化为0表示默认选中第一个
const selectedIndex = ref<number>(0);

// 获取事由列表
const fetchReasonList = async () => {
  loading.value = true;
  try {
    const res = await SysVisitorReasonApi().search({
      Page: 1,
      Limit: 50,
    });
    // 由于我们在请求工具中处理了result验证，这里可以直接使用返回数据
    reasonList.value = res.Data;
    // 默认选中第一个
    selectedIndex.value = 0;
  } catch (error) {
    // 错误已在请求工具中处理，这里只需记录
    console.error("获取事由列表失败", error);
  } finally {
    loading.value = false;
  }
};

// 选择事由 - 不可取消选择
const selectReason = (reason: ISearchRequest, index: number) => {
  // 更新选中的索引
  selectedIndex.value = index;
};

// 处理下一步 - 传递数据到下一页
const handleNext = () => {
  // 获取选中的事由对象
  const selectedReason = reasonList.value[selectedIndex.value];
  if (selectedReason) {
    // 跳转到下一页，并传递选中的事由信息
    uni.redirectTo({
      url:
        "/subpkg-visitor/visitor/sysvisitorrecordrequestbill/create?reasonId=" +
        selectedReason.ID,
    });
  }
};

// 页面加载时执行
onMounted(() => {
  fetchReasonList();
});
</script>

<style lang="scss" scoped>
.appointment {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding: 20px;
}

.main-content {
  .section-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #333;
  }

  .reason-list {
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }

  .reason-item {
    padding: 30px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    position: relative;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      background-color: #fafafa;
    }

    &.selected {
      background-color: rgba(184, 142, 103, 0.1);
      border-left: 4px solid #b88e67;

      .reason-text {
        color: #b88e67;
      }
    }

    .reason-text {
      font-size: 16px;
      color: #333;
      transition: all 0.2s ease;
    }
  }

  .next-button {
    margin-top: 48px;
    background-color: #e0e0e0;
    color: #fff;
    text-align: center;
    padding: 16px;
    border-radius: 28px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;

    &.active {
      background-color: #b88e67;
      box-shadow: 0 4px 12px rgba(184, 142, 103, 0.2);
    }
  }
}
</style>
